<template>
	<view class="page">
		<view class="page-ctx">
	
			<view class="box-reviews" v-if="reviews.length">
				<reviewsList :list="reviews" :showRelativeProduct="false" :allowClickToDetail="false"/>
			</view>

			<view class="load-more-box" style="margin-top: 50rpx;">
				<u-loadmore :status="loadmore_status" @loadmore="loadMore" />
			</view>
			
			<w_fill_block height="60"></w_fill_block>
		</view>
	</view>
</template>

<script>
	import reviewsList from "@/components/review/reviewList.vue"

	export default {
		components: {
			reviewsList
		},
		data() {
			return {
				skuid: '', //规格id
				productId: '', //产品id

				reviews: [],
				reviews_count: 0,
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
			}
		},
		onLoad(option) {
			this.skuid = option.skuid || '';
			this.productId = option.productId || '';
			this.setView();
		},
		onShow() {

		},
		onHide() {},

		onPullDownRefresh() {

		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_reviews();
				}
			},
			initQuery() {
				this.reviews = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},

			setView() {
				this.query_reviews()
			},

			query_reviews() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_comments',
						productId: this.productId,
						...this.pagination,
					},
				}).then(res => {
					if (res.code == 200) {
						let {
							count,
							data
						} = res;
						let list = data.list;
						list.forEach(v => {
							// v.picList = v.images.split(',')
							// v.gid = this.gid
							// v.pid = this.pid
							this.format_review_item_star(v)
						})
						this.reviews = this.reviews.concat(list);
						this.loadmore_status = data.count > this.reviews.length ? 'loadmore' : 'nomore';
						this.reviews_count = data.count;
					}
				})
			},

			//处理评分数据
			format_review_item_star(item) {
				let starItems = [];
				for (var i = 1; i <= 5; i++) {
					starItems.push({
						value: i <= item.star ? 1 : 0
					})
				}
				item.starItems = starItems
			},

		}
	}
</script>


<style lang="scss" scoped>
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.page-ctx {
		padding: 24rpx 32rpx;
	}

	.page-title {
		padding: 0 20rpx;
		height: 82rpx;
		line-height: 82rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #222222;
	}

	.box-reviews {
		margin-top: 0;
		// background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0 0rpx;
	}
</style>